Moving Glass Card

カーソルをあてるとカードが傾く
（javascript必要）

02

Glass Card

Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas expedita rerum rem quisquam,hic qui doloribus illum temporibus ut earum inventore sunt error accusamus veniam debitis quasi tempora ipsa dolorum?

More Detail

html file iconHTML

          
<div class="card">
  <div class="content">
  <h2>02</h2>
  <h3>Glass Card</h3>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas expedita rerum rem quisquam,
  hic qui doloribus illum temporibus ut earum inventore sunt error accusamus veniam debitis quasi 
  tempora ipsa dolorum?</p>
  <a href="#">More Detail</a>
  </div> 
</div>

scss file iconSCSS

          
.card {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  /* border-right: 1px solid black;
  border-bottom: 1px solid black; */
  width: 380px;
  height: 580px;
  display: flex;
  align-items: center;
  /* justify-content: center; */ 
  text-align: center;
  border-radius: 15px;
  box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.07);
  background-color: lightseagreen;
  /* cardをぼかす */
  backdrop-filter: blur(5px);
  overflow: hidden;
  margin:0 auto;
  
  /* hoverするまで非表示にしておく */
  .content {
  position: relative;
  padding: 20px;
  transform: translateY(200px);
  opacity: 0;
  transition: 0.8s;
  
    h2{
      /* relativeしたcontentを親にする */
      position: absolute;
      top: -60px;
      right: 30px;
      font-size: 8rem;
      color: rgba(255, 255, 255, 0.1);
    }
    h3{
      color: #fff;
      font-size: 1.8rem;
    }
    p{
      color: #fff;
      font-size: 1rem;
      font-weight: 300;
    }
    a{
      text-decoration: none;
      display: inline-block;
      /* inline-blockにすることで高さと幅が指定できる */
      padding: 8px 20px;
      background: #fff;
      margin-top: 15px;
      border-radius: 20px;
      color: #000;
      font-weight: 500;
      box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5);
    }
  }
  
  &:hover{
    .content{
      transform: translateY(0);
      opacity: 1;
    }
  } 
}
@media (max-width:1160px){
  .card{
    height:500px;
  }
}
@media (max-width:690px){
  .card{
    height:400px;
  }
}
@media (max-width:490px){
  .card{
    height:380px;
  }
}

JSJS

            
            <script src="vanilla-tilt.babel.min.js"></script>
            <script type="text/javascript">
              VanillaTilt.init(document.querySelector(".card"),{
                max:25, 
                speed:400, 
                glare:true,
                "max-glare":1,
              });  
            </script>

TIPs.DESIGN